import React, { Component } from 'react';
import pic1 from '../assets/1.jpg'
import pic2 from '../assets/2.png'
import pic3 from '../assets/3.jpg'
import pic4 from '../assets/4.jpg'


import "../styles/MyList.scss";


class MyList extends Component {
    constructor(props) {
        super(props);
        this.state = { //state中保存的值就是组件的状态
            currentIndex: 0, //用来保存当前点击按钮的下标
            list1: [
                { text: '综合' },
                { text: '销量' },
                { text: '新品' },
                { text: '价格' },
                { text: '筛选' },

            ],
            list2: [
                { pic: pic1, text: 'COSME DECORTE黛珂植物欣韵沁莹化妆水 20...', price: '￥270', money: '￥215' },
                { pic: pic2, text: 'COSME DECORTE黛珂牛油果乳液150ml', price: '￥303', money: '￥675' },
                { pic: pic3, text: 'COSME DECORTE黛珂植物欣韵沁莹化妆水 20...', price: '￥396', money: '￥195' },
                { pic: pic4, text: 'COSME DECORTE黛珂牛油果乳液150ml', price: '￥520', money: '￥425' },
            ]
        }
    }

    handleClick(index) {
        //更新下标currentIndex
        this.setState({ currentIndex: index })
    }

    render() {
        return (
            <div className='MyList'>
                <div className="nav">
                    {this.state.list1.map((item, index) => {
                        return (
                            <div className={'item ' + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.handleClick(index) }}>
                                <div className="text">{item.text}</div>
                            </div>
                        )
                    })}
                </div>
                <div className="one">
                    {this.state.list2.map((item, index) => {
                        return (
                            <div className="item" key={index}>
                                <div className="tu">
                                    <img src={item.pic} alt="" />
                                </div>
                                <div className="text">{item.text}</div>
                                <div className="price">{item.price}</div>
                                <div className="money">{item.money}</div>
                            </div>
                        )
                    })
                    }
                </div>

            </div>
        );
    }
}

export default MyList;